<!DOCTYPE html>
<html lang="en" class="no-js">
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8"/>
    <title>Tina</title>
    <link rel="shortcut icon" href="img/k15.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>

    <!-- GLOBAL MANDATORY STYLES -->
    <link href="http://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet" type="text/css">
    <link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css"/>
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

    <!-- PAGE LEVEL PLUGIN STYLES -->
    <link href="css/animate.css" rel="stylesheet">

    <!-- THEME STYLES -->
    <link href="css/layout.min.css" rel="stylesheet" type="text/css"/>

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico"/>
    <style type="text/css">
        #pigs {
            color: #17BED2;
        }

        .nong {
            color: #d545d1;
        }

        .pi {
            color: #67B168;
        }

        .gs {
            color: #DFF0D8;
        }
    </style>
</head>
<!-- END HEAD -->

<!-- BODY -->
<body id="body" data-spy="scroll" data-target=".header">

<!--========== HEADER ==========-->
<header class="header navbar-fixed-top">
    <!-- Navbar -->
    <nav class="navbar" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="menu-container js_nav-item">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="toggle-icon"></span>
                </button>

                <!-- Logo -->
                <div class="logo">
                    <a class="logo-wrap" href="#body" style="width: 320%;">
                        <h1>
                            <span style="color:#1abc9c;font-size: 35px;">T</span>
                            <span style="color:#17BED2;font-size: 35px;">i</span>
                            <span style="color: fuchsia;font-size: 35px;">n</span>
                            <span style="color: hotpink;font-size: 35px;">a</span>
                            &nbsp;<span style="color:#63CBD7;font-size: 35px;">-</span>&nbsp;
                            <span style="color: #DCA7A7;font-size: 35px;">S</span>
                            <span style="color: mediumpurple;font-size: 35px;">I</span>
                            <span style="color: #67B168;font-size: 35px;">M</span>
                            <span style="color: cyan;font-size: 35px;">P</span>
                            <span style="color: #F0AD4E;font-size: 35px;">L</span>
                            <span style="color: lightseagreen;font-size: 35px;">E</span>
                        </h1>

                    </a>
                </div>
                <!-- End Logo -->
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse nav-collapse">
                <div class="menu-container">

                    <ul class="nav navbar-nav navbar-nav-right">
                        <li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#body">首页</a>
                        </li>
                        <li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#about">关于</a>
                        </li>
                        <li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover"
                                                            href="#experience">特色</a></li>
                        <li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#work">作品</a>
                        </li>
                        <li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#contact">联系</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- End Navbar Collapse -->
        </div>
    </nav>
    <!-- Navbar -->
</header>
<!--========== END HEADER ==========-->

<!--========== SLIDER ==========-->
<div class="promo-block parallax-window" data-parallax="scroll" data-image-src="img/01.jpg">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="promo-block-divider">
                    <h1 class="promo-block-title"><strong id="pigs">Ti</strong><strong class="nong">na</strong>
                </div>
                <ul class="list-inline">
                    <p class="promo-block-text"><strong class="nong">Java</strong>&nbsp;&nbsp;
                        <strong style="color: lightseagreen;">MySQL</strong>&nbsp;&nbsp;
                        <strong style="color: hotpink;">SSM</strong>
                        &nbsp;&nbsp;
                        <strong style="color: #78ff69;">SpringBoot</strong>
                        &nbsp;&nbsp;
                        <strong style="color: lightgreen;">Linux</strong></p>
                </ul>
            </div>
        </div>
        <!--// end row -->
    </div>
</div>
<!--========== SLIDER ==========-->

<!--========== PAGE LAYOUT ==========-->
<!-- About -->
<div id="about">
    <div class="container content-lg">
        <div class="row">
            <div class="col-sm-3 sm-margin-b-30">
                <div class="text-right sm-text-left">
                    <h2 class="margin-b-0">介绍</h2>
                </div>
            </div>
            <div class="col-sm-8 col-sm-offset-1">
                <div class="margin-b-60">
                    <p>一个不会养猪的猪农&nbsp;!&nbsp;努力中.........</p>

                    <p>目前技术 <strong class="nong">Java</strong> 、
                        MySQL、SSM、BootStrap、Linux、jQuery、Html、JSP、SpringBoot、Redis、MongoDB</p>
                </div>

                <!-- Progress Box -->
                <div class="progress-box">
                    <h5>Java<span class="color-heading pull-right">88%</span></h5>
                    <div class="progress">
                        <div class="progress-bar bg-color-base" role="progressbar" data-width="88"></div>
                    </div>
                </div>
                <div class="progress-box">
                    <h5>Redis<span class="color-heading pull-right">78%</span></h5>
                    <div class="progress">
                        <div class="progress-bar bg-color-base" role="progressbar" data-width="78"></div>
                    </div>
                </div>
                <div class="progress-box">
                    <h5>SSM <span class="color-heading pull-right">89%</span></h5>
                    <div class="progress">
                        <div class="progress-bar bg-color-base" role="progressbar" data-width="89"></div>
                    </div>
                </div>
                <div class="progress-box">
                    <h5>MySQL <span class="color-heading pull-right">76%</span></h5>
                    <div class="progress">
                        <div class="progress-bar bg-color-base" role="progressbar" data-width="76"></div>
                    </div>
                </div>
                <!-- End Progress Box -->
            </div>
        </div>
        <!--// end row -->
    </div>
</div>
<!-- End About -->

<!-- Experience -->
<div id="experience">
    <div class="bg-color-sky-light" data-auto-height="true">
        <div class="container content-lg">
            <div class="row">
                <div class="col-sm-3 sm-margin-b-30">
                    <div class="text-right sm-text-left">
                        <h2 class="margin-b-0">特色</h2>
                        <p>猪猪侠会嫉妒.</p>
                    </div>
                </div>
                <div class="col-sm-8 col-sm-offset-1">
                    <div class="row row-space-2 margin-b-4">
                        <div class="col-md-4 md-margin-b-4">
                            <div class="service" data-height="height">
                                <div class="service-element">
                                    <i><img src="img/linux.png"></i>
                                </div>
                                <div class="service-info">
                                    <h3>Linux</h3>
                                    <p class="margin-b-5">是一种自由和开源原始码的类UNIX作业系统，該作业系统的核心由林納斯·托瓦茲在1991年10月5日首次发布..</p>
                                </div>
                                <a href="#" class="content-wrapper-link"></a>
                            </div>
                        </div>
                        <div class="col-md-4 md-margin-b-4">
                            <div class="service bg-color-base wow zoomIn" data-height="height" data-wow-duration=".3"
                                 data-wow-delay=".1s">
                                <div class="service-element">
                                    <i><img src="./img/java.png"/></i>
                                </div>
                                <div class="service-info">
                                    <h3 class="color-white">Java</h3>
                                    <p class="color-white margin-b-5">
                                        Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点..</p>
                                </div>
                                <a href="#" class="content-wrapper-link"></a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="service" data-height="height">
                                <div class="service-element">
                                    <i><img src="img/MySQL.png"/></i>
                                </div>
                                <div class="service-info">
                                    <h3>MySQL</h3>
                                    <p class="margin-b-5">
                                        MySQL是一种关系数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性..</p>
                                </div>
                                <a href="#" class="content-wrapper-link"></a>
                            </div>
                        </div>
                    </div>
                    <!--// end row -->
                </div>
            </div>
            <!--// end row -->
        </div>
    </div>
</div>
<!-- End Experience -->

<!-- Work -->
<div id="work">
    <div class="container content-lg">
        <div class="row">
            <div class="col-sm-3 sm-margin-b-30">
                <div class="text-right sm-text-left">
                    <h2 class="margin-b-0">作品</h2>
                    <p>创造真正的价值.</p>
                </div>
            </div>
            <div class="col-sm-8 col-sm-offset-1">
                <!-- Masonry Grid -->
                <div class="masonry-grid row row-space-2">
                    <div class="masonry-grid-sizer col-xs-6 col-sm-6 col-md-1"></div>
                    <div class="masonry-grid-item col-xs-12 col-sm-6 col-md-8 margin-b-4">
                        <!-- Work -->
                        <div class="work work-popup-trigger">
                            <div class="work-overlay">
                                <img class="full-width img-responsive" src="/simple/img/tina.png" alt="Portfolio Image">
                            </div>
                            <div class="work-popup-overlay">
                                <div class="work-popup-content">
                                    <a href="javascript:void(0);" class="work-popup-close">关闭</a>
                                    <div class="margin-b-30">
                                        <h3 class="margin-b-5">基于 SpringBoot 权限管理系统(Tina)</h3>

                                    </div>
                                    <div class="row">
                                        <div class="col-sm-8 work-popup-content-divider sm-margin-b-20">
                                            <div class="margin-t-10 sm-margin-t-0">
                                                <p> 1．基 于 经 典 技 术 组 合（ Dubbo、Spirng Boot、LayUI、MyBatis Plus、Redis、
                                                    MySQL、 Docker、 Apache Shiro）<br>
                                                    2． Shiro 权 限 的 控 制<br>
                                                    3． Maven 管 理 项 目 ,服 务 拆 分 ,尽 量 松 耦 合 ,方 便 模 块 升 级 ,增 减 模 块<br>
                                                    4． 完 全 响 应 式 布 局 （ 支 持 电 脑 、 平 板 、 手 机 等 所 有 主 流 设 备 ）</p>
                                                <ul class="list-inline work-popup-tag">
                                                    <li class="work-popup-tag-item"><a target="_blank"
                                                                                       class="work-popup-tag-link"
                                                                                       href="/index.html">点击进入</a>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="margin-t-10 sm-margin-t-0">
                                                <p class="margin-b-5"><strong>开发者:</strong> Tina</p>
                                                <p class="margin-b-5"><strong>设计师:</strong> Tina</p>
                                                <p class="margin-b-5"><strong>DB:</strong> Tina</p>
                                                <hr/>
                                                <a target="_blank"
                                                   href='https://gitee.com/pig_farmer_x/tina/stargazers'>
                                                    <img src='https://gitee.com/pig_farmer_x/tina/badge/star.svg?theme=dark'
                                                         alt='star'>
                                                    </img>
                                                </a>

                                                <a target="_blank" href='https://gitee.com/pig_farmer_x/tina/members'>
                                                    <img src='https://gitee.com/pig_farmer_x/tina/badge/fork.svg?theme=dark'
                                                         alt='fork'>
                                                    </img>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Work -->
                    </div>

                    <!--    Tina-Shop   -->
                    <div class="masonry-grid-item col-xs-12 col-sm-6 col-md-4 margin-b-4">
                        <!-- Work -->
                        <div class="work work-popup-trigger">
                            <div class="work-overlay">
                                <img class="full-width img-responsive" src="/simple/img/tina-bank.jpg" alt="Portfolio Image">
                            </div>
                            <div class="work-popup-overlay">
                                <div class="work-popup-content">
                                    <a href="javascript:void(0);" class="work-popup-close">关闭</a>
                                    <div class="margin-b-30">
                                        <h3 class="margin-b-5">Tina-BANK</h3>

                                    </div>
                                    <div class="row">
                                        <div class="col-sm-8 work-popup-content-divider sm-margin-b-20">
                                            <div class="margin-t-10 sm-margin-t-0">
                                                <p>致力于提供"简单、安全、快速"的支付解决方案 。2019年建立开始，始终以"信任"作为产品和服务的核心.</p>
                                                <p>广大使用.....可在Tina-SHOP消费.</p>
                                                <ul class="list-inline work-popup-tag">
                                                    <li class="work-popup-tag-item"><a
                                                            class="work-popup-tag-link tina-shop"
                                                            href="javascript:;">暂时无连接</a>
                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="margin-t-10 sm-margin-t-0">
                                                <p class="margin-b-5"><strong>开发者:</strong> Tina</p>
                                                <p class="margin-b-5"><strong>设计师:</strong> Tina</p>
                                                <p class="margin-b-5"><strong>DB:</strong> Tina</p>
                                                <hr/>
                                                <a target="_blank"
                                                   href='https://gitee.com/pig_farmer_x/pigAtmSSM/stargazers'>
                                                    <img src='https://gitee.com/pig_farmer_x/pigAtmSSM/badge/star.svg?theme=dark'
                                                         alt='star'>
                                                    </img>
                                                </a>

                                                <a target="_blank"
                                                   href='https://gitee.com/pig_farmer_x/pigAtmSSM/members'>
                                                    <img src='https://gitee.com/pig_farmer_x/pigAtmSSM/badge/fork.svg?theme=dark'
                                                         alt='fork'>
                                                    </img>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Work -->
                    </div>

                    <!--   Tina-Bank -->
                    <div class="masonry-grid-item col-xs-12 col-sm-6 col-md-4 margin-b-4">
                        <!-- Work -->
                        <div class="work work-popup-trigger">
                            <div class="work-overlay">
                                <img class="full-width img-responsive" src="/simple/img/tina-shop.png" alt="Portfolio Image">
                            </div>
                            <div class="work-popup-overlay">
                                <div class="work-popup-content">
                                    <a href="javascript:void(0);" class="work-popup-close">关闭</a>
                                    <div class="margin-b-30">
                                        <h3 class="margin-b-5">Tina-SHOP</h3>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-8 work-popup-content-divider sm-margin-b-20">
                                            <div class="margin-t-10 sm-margin-t-0">
                                                <p>&nbsp;</p>
                                                <p>&nbsp;</p>
                                                <ul class="list-inline work-popup-tag">
                                                    <li class="work-popup-tag-item"><a
                                                            class="work-popup-tag-link tina-shop"
                                                            href="javascript:;">暂时无连接</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="margin-t-10 sm-margin-t-0">
                                                <p class="margin-b-5"><strong>开发者:</strong> Tina</p>
                                                <p class="margin-b-5"><strong>设计师:</strong> Tina</p>
                                                <p class="margin-b-5"><strong>DB:</strong> Tina</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Work -->
                    </div>



                </div>
            </div>
            <!-- End Masonry Grid -->
        </div>
    </div>
    <!--// end row -->
</div>

<!-- End Work -->

<!-- Contact -->
<div id="contact">
    <div class="bg-color-sky-light">
        <div class="container content-lg">
            <div class="row">
                <div class="col-sm-3 sm-margin-b-30">
                    <div class="text-right sm-text-left">
                        <h2 class="margin-b-0">联系</h2>
                        <p>Contact Me.</p>
                    </div>
                </div>
                <div class="col-sm-8 col-sm-offset-1">
                    <div class="row">
                        <div class="col-md-3 col-xs-6 md-margin-b-30">
                            <h5>地址</h5>
                            <a href="#">广州-天河区</a>
                        </div>
                        <div class="col-md-3 col-xs-6">
                            <h5>电子邮箱</h5>
                            <a href="mailto:#">3121831267@qq.com</a>
                        </div>

                    </div>
                </div>
            </div>
            <!--// end row -->
        </div>
    </div>
</div>
<!-- End Contact -->
<!--========== END PAGE LAYOUT ==========-->

<!--========== FOOTER ==========-->
<footer class="footer">
    <div class="content container">
        <div class="row">
            <div class="col-xs-6">
                <span style="color:#1abc9c;font-size: 35px;">T</span>
                <span style="color:#17BED2;font-size: 35px;">i</span>
                <span style="color: fuchsia;font-size: 35px;">n</span>
                <span style="color: hotpink;font-size: 35px;">a</span>
                &nbsp;<span style="color:#63CBD7;font-size: 35px;">-</span>&nbsp;
                <span style="color: #DCA7A7;font-size: 35px;">S</span>
                <span style="color: mediumpurple;font-size: 35px;">I</span>
                <span style="color: #67B168;font-size: 35px;">M</span>
                <span style="color: cyan;font-size: 35px;">P</span>
                <span style="color: #F0AD4E;font-size: 35px;">L</span>
                <span style="color: lightseagreen;font-size: 35px;">E</span>
            </div>
            <div class="col-xs-6 text-right sm-text-left">
                <p class="margin-b-0">©2019-2020 Tina.<a target="_blank" href="http://sc.chinaz.com/moban/"></a></p>
            </div>
        </div>
        <!--// end row -->
    </div>
</footer>
<!--========== END FOOTER ==========-->

<!-- Back To Top -->
<a href="javascript:void(0);" class="js-back-to-top back-to-top">Top</a>

<!-- JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- CORE PLUGINS -->
<script src="vendor/jquery.min.js" type="text/javascript"></script>
<script src="vendor/jquery-migrate.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<!-- PAGE LEVEL PLUGINS -->
<script src="vendor/jquery.easing.js" type="text/javascript"></script>
<script src="vendor/jquery.back-to-top.js" type="text/javascript"></script>
<script src="vendor/jquery.smooth-scroll.js" type="text/javascript"></script>
<script src="vendor/jquery.wow.min.js" type="text/javascript"></script>
<script src="vendor/jquery.parallax.min.js" type="text/javascript"></script>
<script src="vendor/jquery.appear.js" type="text/javascript"></script>
<script src="vendor/masonry/jquery.masonry.pkgd.min.js" type="text/javascript"></script>
<script src="vendor/masonry/imagesloaded.pkgd.min.js" type="text/javascript"></script>

<!-- PAGE LEVEL SCRIPTS -->
<script src="js/layout.min.js" type="text/javascript"></script>
<script src="js/components/progress-bar.min.js" type="text/javascript"></script>
<script src="js/components/masonry.min.js" type="text/javascript"></script>
<script src="js/components/wow.min.js" type="text/javascript"></script>

</body>
<!-- END BODY -->
</html>
